<template>

  <div class="xiangqing">
    <div class="top">
      <van-nav-bar title="详情页" left-arrow @click-left="onClickLeft" />
    </div>

    <div class="top-title" v-show="zanshi" :style="{backgroundImage:'url(' + (titleData && titleData.poi_back_pic_url) +')' }">
      <div class="title">
        <span>
          <img :src="titleData.picUrl" alt="">
        </span>
        <span>{{titleData.name}}</span>
        <span v-if="collectJudge" style="color:red;" @click='pop_shopdata(titleData)'>❤</span>
        <span v-else @click='push_shopdata(titleData)'>❤</span>
      </div>
    </div>

    <div class=" shopping" v-show="zanshi">

      <div class="count">

        <div class="left">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item :title="item.name" v-for='(item,index) in taglistData.taglist && taglistData.taglist' :key="index" />
          </van-sidebar>
        </div>

        <div class="right">
          <div class="shopp-main" v-for='(item,index) in taglistData.taglist && taglistData.taglist[activeKey].goodlist' :key="index">
            <div class="left-left">
              <div class="img">
                <img :src="item.picture" alt="">
              </div>
            </div>

            <div class="right-right">
              <h3>{{item.name}}</h3>
              <div class="miaoshu">{{item.averagePriceTip}}</div>
              <div class="yueshou">{{item.month_saled_content}}&nbsp;&nbsp;&nbsp;<span>{{item.promotion_info}}</span></div>
              <div class="fo">
                <div class="money">￥{{item.min_price}}</div>
                <span class="anniu" @click='add(item)'>+</span>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

    <div class="footer">
      <div class="left">
        <van-icon name="cart-o" size="60" color="antiquewhite" @click='trolley' />
        <span>总价:0</span>
        <span>总计:0</span>
      </div>
      <button>去结算</button>
    </div>
    <ShoppingTrolley ref="shoppingtrolley"></ShoppingTrolley>
  </div>

</template>

<script>
import ShoppingTrolley from '../components/ShoppingTrolley.vue'
import { shopinfo_list } from "../axios/api";
import { Toast } from 'vant';
import { Dialog } from 'vant';
import { mapActions, mapState, mapMutations } from "vuex";

export default {
  components: { ShoppingTrolley },

  data() {
    return {
      zanshi: true,
      taglistData: {},
      titleData: {},
      activeKey: 0,
    }
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    // ...mapMutations(['shopcart']),
    ...mapActions(['push_shopdata', 'pop_shopdata', 'clear', 'add']),
    trolley() {
      this.$refs.shoppingtrolley.add();
    },
  },

  computed: {
    ...mapState(['shopData', 'shopcarDatatata']),

    collectJudge() {
      var index = this.shopData.findIndex((item) => {
        return item.mtWmPoiId == this.titleData.mtWmPoiId;
      })
      return index !== -1
    },
  },

  mounted() {
    // setTimeout(() => {
    //   console.log(this.taglistData.taglist);

    // }, 2000);
    
    shopinfo_list({ id: this.$route.params.name }).then(
      response => {
        if (response.data.code == 200) {
          this.taglistData = response.data.shopinfo;
          this.titleData = response.data.shopinfo.info;
          Toast.clear();
          // console.log(response.data.shopinfo);
        } else {
          Dialog.alert({ message: '商家凉咯，换一家吧！', }).then(() => { this.$router.go(-1); Toast.clear() });
        }
      }
    )
  },
}
</script>

<style lang='scss' scoped>
.footer {
  width: 100%;
  height: 70px;
  background-color: rgb(128, 128, 128);
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    width: 50%;
    height: 100%;
    display: flex;
    color: #fff;
    justify-content: space-around;
    align-items: center;
  }
  button {
    width: 90px;
    height: 40px;
    background-color: rgba(0, 255, 255, 0.838);
    margin-right: 20px;
    border-radius: 8px;
    color: #fff;
  }
}
.top-title {
  width: 100%;
  height: 130px;
  background-color: aqua;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // position: sticky;
  // top: 46px;
  // z-index: 99;
  .title {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    span:nth-child(1) {
      width: 30px;
      height: 30px;
      // background-color: red;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    span:nth-child(2) {
      width: 300px;
      height: 30px;
      // background-color: red;
      line-height: 30px;
      color: #fff;
    }
    span:nth-child(3) {
      width: 30px;
      height: 30px;
      // background-color: red;
      text-align: center;
      line-height: 30px;
      color: #fff;
    }
  }
}
.top {
  position: sticky;
  top: 0;
  z-index: 88;
}
.shopping {
  width: 100%;
  height: 100%;
  .count {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    // background-color: aqua;
    .left {
      width: 20%;
      height: 100%;
      //   background-color: red;
    }
    .right {
      flex: 1;
      //   width: 80%;
      //   background-color: orange;
      .shopp-main {
        width: 100%;
        height: 140px;
        // background-color: orchid;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-left {
          width: 35%;
          height: 100%;
          //   background-color: rgba(255, 0, 0, 0.308);
          .img {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 90%;
              height: 90%;
            }
          }
        }
        .right-right {
          width: 65%;
          height: 100%;
          //   background-color: aqua;
          .miaoshu {
            color: gray;
            font-size: 14px;
            margin: 6px;
          }
          .yueshou {
            margin: 6px;
            color: gray;
            font-size: 14px;
            span {
              color: gray;
              font-size: 14px;
            }
          }
          .fo {
            width: 100%;
            height: 30px;
            // background-color: rgba(255, 0, 0, 0.242);
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .money {
              width: 100px;
              height: 100%;
              //   background-color: rgb(255, 0, 225);
              color: red;
              font-size: 20px;
            }
            .anniu {
              width: 30px;
              height: 100%;
              background-color: red;
              border-radius: 50%;
              text-align: center;
              line-height: 30px;
              color: #fff;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}
</style>